﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    
    <!--
		可以选择访问网络的js或者局域网的js
		吧html拖到猎豹浏览器,不能用本软件过去
		如果mqtt建立成功,则订阅主题和发送主题都是/World
    -->
    <!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js” type=“text/javascript”> </script> -->
    <script src="js/mqttws31.js" type="text/javascript"></script>
    	<meta charset="utf-8">  
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<script type="text/javascript" src="js/mui.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<script type="text/javascript" src="js/reconnecting-websocket.min.js"></script>
	<script type="text/javascript" src="js/update.js"></script>
	<title>SmartTalk</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <script> 
    	var temp1 ,serverip,flagmqttok=0;
    	var myid="20191028";
    	var flag0=0;
	     var em=null,map=null;
	     // H5 plus事件处理
	     function plusReady()
	     {
	          // 确保DOM解析完成
	          if(!em||!window.plus||map){return};
	          //创建地图
	          map = new plus.maps.Map("map");
	          //new plus.maps.Point(116.3977,39.906016)吧GPS经纬度转换成地图能识别
	          //吧地图显示在这个坐标,缩放等级是12,取值0-22                  
	          map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 14);
	          //执行这3句,则会启动高德地图,地图显示目的地dst所在位置,
	          //位置的描述可以我们自己定,src这个不会显示,没用,从而实现用
	          //高德进行导航 
	               //var dst = new plus.maps.Point(116.39131928,39.90793074); // 天安门
	              //var src = new plus.maps.Point(116.335,39.966); // 大钟寺
	              //plus.maps.openSysMap( dst, "禾木电子总部", src );             
	          //true显示地图缩放按钮,false不显示
	          map.showZoomControls( true );
	          flag=1
	          
	     }
	     if(window.plus)
	     {
	          plusReady();
	     }
	     else
	     {
	          document.addEventListener("plusready",plusReady,false);
	     }
	     // DOMContentloaded事件处理
	     document.addEventListener("DOMContentLoaded",function()
	     {
	          em=document.getElementById("map");
	          plusReady();
	     },false);
	     
	     // 定位
	
	     var marker=null;
	
	     function addMarker()//调用一次就定位一次,同时在定位点显示自定义图标,点击图标,会显示指定的消息,再点则隐藏
	     {    
	 
	     
	          //如果已经添加,则再不进来,地图被移动以后,为了重新定位,则屏蔽掉
	          //if(marker){return;}arr1[0],arr1[1]
	          //添加点
	          
	          marker=new plus.maps.Marker(new plus.maps.Point(document.getElementById("id3").value,document.getElementById("id4").value));
	         //把地图缩放到以这个点为中心
	         map.centerAndZoom( new plus.maps.Point(document.getElementById("id3").value,document.getElementById("id4").value), 16);
	          //在坐标显示一个图标,点开图标,会显示信息,在点击图标,则隐藏消息
	          //点开以后,有新的数据过来也不会覆盖
//	
//	          marker.setIcon("/img/png.png"); 
//	
//	          
//	          var bubble = new plus.maps.Bubble("当前位置");//显示气泡
//	
//	          marker.setBubble(bubble)
	
	          //在地图位置直接加文字
	          marker.setLabel("我");
	          map.addOverlay(marker);      
	          
	     }
      		function websockstart()
			{
				//要连接b230这个     
	
	        	var hostname = serverip,  
	            port = 8083, 
	            clientId = myid+"aa", 
	            timeout = 5,   
	            keepAlive = 100, 
	            cleanSession = false, 
	            ssl = false, 
	            temp1='12', 
	 			
	            topic = '';  
	       
		        client = new Paho.MQTT.Client(hostname, port,clientId);
		  
		        //建立客户端实例    
		        var options = {   
		            invocationContext: {
		                host: hostname,
		                port: port,
		                path: client.path, 
		                clientId: clientId
		            },
		            timeout: timeout, 
		            keepAliveInterval: keepAlive,
		            cleanSession: cleanSession,
		            useSSL: ssl,
		         //   userName: userName,  
		          //  password: password1,  
		            onSuccess: onConnect,  
		            onFailure: function (e) {
		         
		               // s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onFailure()}";
		                websockstart()
		            }
		        };  
		        client.connect(options);
		        //连接服务器并注册连接成功处理事件  
		        function onConnect() { 
		        	
		           alert( new Date().Format("yyyy-MM-dd hh:mm:ss")+"  连接服务器成功");
		           flagmqttok=1
		           client.subscribe(myid)
		        } 
		
		        client.onConnectionLost = onConnectionLost;
		
		        //注册连接断开处理事件  
		        client.onMessageArrived = onMessageArrived;
		 
		        //注册消息接收处理事件   
		        function onConnectionLost(responseObject) {
		 
		            s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnectionLost()}";
		            console.log(s);
		             if (responseObject.errorCode !== 0) {
		               //  console.log("onConnectionLost:" + responseObject.errorMessage);
		                console.log("连接已断开");
		                flagmqttok=0
		                websockstart()
		  
		            }  
		        } 
	 		}
 
        function onMessageArrived(message) {       
            console.log("主题："+message.destinationName);
  			console.log("收到消息:"+message.payloadString);

			var obj = JSON.parse(message.payloadString);

  	
			document.getElementById("id3").value =obj.V2
   			document.getElementById("id4").value =obj.V1
	
        }     
   		function aa() //显示消息
   		{



		
   		}
   		 
   		
        function send(vala) {
            if (vala) {
                message = new Paho.MQTT.Message(vala);
                message.destinationName = myid+"/ctrl";
                client.send(message); 
             
            }
        }

        function k1() {
           send("{\"k1\":\""+"\"}")
        }
        function k2() {
           send("{\"k2\":\""+"\"}") 
        }
        function k3() {
           send("{\"k3\":\""+"\"}")
        }
        function k4() {
           send("{\"k4\":\""+"\"}") 
        } 
        function k5() {
           send("{\"k5\":\""+"\"}") 
        }               
        var count = 0;

        function start() {
            window.tester = window.setInterval(function () {
                if (client.isConnected) {
                    var s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (count++) +
                        ", from: web console}";
                    message = new Paho.MQTT.Message(s);
                    message.destinationName = topic;
                    client.send(message);
                }
            }, 1000);
        }

        function stop() {
            window.clearInterval(window.tester);
        }  
        function blink()
        {
        	if(flagmqttok==0)
        	{
	        	serverip=document.getElementById("id").value 
	        	myid=document.getElementById("sn").value 
	        	websockstart()
	        	
			}
        	else
        	{
        	
        		alert("服务器已经连接")
        	}
        }
        
        function restart() {
            window.location.reload()
        }  
 
        Date.prototype.Format = function (fmt) { //author: meizz 
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };//reain
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
                    k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    </script>
</head>

<body>
	
	 <style type="text/css">
     #map 
     {
     width: 100%;
     position: fixed;
     bottom: 0px;
     top:450px;
     left: 0px;
     line-height: 200px;
     text-align: center;
     background: #FFFFFF;
     }

    </style>
        
           <input type="text" id="id" value="120.79.220.39" hidden="hidden" />
         <input type="text" id="sn" value="429151576328" / hidden="hidden">        
    <input type="button" value="连接" onclick="blink()" />
    <input type="button" value="断开" onclick="restart()" /><br><br>
    
    
    <fieldset>      
      <legend>实时值</legend>    
                   
     纬度<input type="text" id="id3"/> 
      经度<input type="text" id="id4"/><br>
 

    </fieldset>  
    <input type="button" value="定位" onclick="addMarker()"/><br>

 <div id="map">地图加载中...</div> <br><br>
  
</body>

</html> 